<template>
	<view class="wrap">
		<view class="main" v-if="state">
			<view class="card-box">
				<view class="main-info">
					<view class="b-vip">可用余额</view>
					<view class="s-left">
						{{state.card_info.amount_left || 0.00}}
					</view>
				</view>
				<view class="card-info" v-if="state.card_info.number > 0">
					<view class="b-info">
						<view class="s-date" @click="onCopy(state.card_info.number)">
							卡号: {{state.card_info.number}}
						</view>
					</view>
					<view class="b-record" @click="onJumpRecord">
						<view class="s-tit">账户记录</view>
						<view class="iconfont icon-more"></view>
					</view>
				</view>
				<view class="open-info" v-else>
					<view class="b-cont">充值立享更多权益</view>
				</view>
			</view>
			<!-- <view class="box">
				<view class="box-head">会员权益</view>
				<view class="box-main">
					<scroll-view class="card-detail" scroll-x>
						<view class="b-row">
							<view class="b-main">
								<view class="iconfont icon-vip-course"></view>
								<view class="s-tit">充值返现</view>
								<view class="s-cont">部分课程会员免费</view>
							</view>
						</view>
						<view class="b-row">
							<view class="b-main">
								<view class="iconfont icon-vip-schedule"></view>
								<view class="s-tit">免费培训</view>
								<view class="s-cont">部分培训会员免费</view>
							</view>
						</view>
						<view class="b-row">
							<view class="b-main">
								<view class="iconfont icon-vip-price"></view>
								<view class="s-tit">会员特价</view>
								<view class="s-cont">特价购买课程或培训</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view> -->
			<view class="box">
				<view class="box-head">
					<view class="b-title">选择套餐</view>
					<view class="b-tips">一经充值，概不退回，不兑现</view>
				</view>
				<view class="box-main card-list">
					<view class="card-item" v-for="(item, index) in state.pack_list" :key="index">
						<view class="b-main" :class="{'f-active': packIndex === index}" @click="onChooseCard(index)">
							<view class="b-name" v-if="item.name">{{item.name}}</view>
							<view class="b-price">
								<view class="s-sell-price">充{{item.price}}元</view>
								<view class="s-price" v-if="item.price != item.amount">到账{{item.amount}}元</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="box-head">支付方式</view>
				<view class="box-main pay-list">
					<radio-group @change="onRadioChange" v-for="(item, index) in payList" :key="index">
						<view class="b-row">
							<view class="b-tit">
								<view class="iconfont" :class="'icon-'+item.icon"></view>
								<view class="s-tit">{{item.name}}</view>
							</view>
							<view class="b-cont">
								<radio value="wechat" :checked="item.checked" color="#FF9626" />
							</view>
						</view>
					</radio-group>
				</view>
			</view>
			<view class="navbar">
				<view class="b-amount">
					<!-- <view class="s-tit">应付:</view> -->
					<view class="s-num">¥{{state.pack_list[packIndex].price}}</view>
				</view>
				<view class="b-action">
					<view class="s-exchange" @click="onRecharge">立即充值</view>
				</view>
			</view>
		</view>
		<!-- 首页 -->
		<app-home></app-home>
	</view>
</template>

<script>
	import {
		getWrapData
	} from '@/service/api/fund.js'
	import {
		requestRecharge
	} from '@/service/request/main.js'
	import mixinsAuth from '@/mixins/auth.js'
	import mixinsCommon from '@/mixins/common.js'
	export default {
		mixins: [mixinsCommon, mixinsAuth],
		data() {
			return {
				state: null,
				hasLoad: false,
				packIndex: 0,
				payList: [{
					icon: 'pay-wechat',
					alias: 'wechat',
					name: '微信支付',
					checked: true
				}],
				payIndex: 0,
				loadingType: 1,
				loadingText: '',
			}
		},
		onLoad(options) {
			this.loadWrapData()
		},
		methods: {
			loadWrapData() {
				getWrapData().then(([err, res]) => {
					console.log('getWrapData', err, res)
					if (!err) {
						this.hasLoad = true
						this.loadingType = -1
						this.state = res
					} else {
						this.loadingType = 3
						this.loadingText = err.data.msg || '加载失败'
					}
				})
			},
			onChooseCard(index) {
				this.packIndex = index
			},
			onRadioChange(e) {
				console.log('onRadioChange', e)
			},
			onRecharge() {
				const cardInfo = this.state.pack_list[this.packIndex]
				const channel = this.payList[this.payIndex].alias
				requestRecharge(cardInfo.id, channel).then(([err, res]) => {
					console.log('requestRecharge', err, res)
					if (!err) {
						this.loadWrapData()
					}
				})
			},
			onJumpRecord() {
				uni.navigateTo({
					url: '/pages/user/fund_record'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}

	.wrap {
		padding-bottom: 150upx;
	}


	.card-box {
		margin: 30upx auto 0 auto;
		width: 680upx;
		border-radius: 20upx;
		background: #2E2E2D;

		.main-info {
			padding: 50upx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.b-vip {
				color: #fff;
				font-size: 28upx;
			}

			.s-left {
				margin-top: 40upx;
				color: #fff;
				font-size: 60upx;
				font-weight: bold;
			}
		}

		.card-info {
			padding: 30upx 40upx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.b-info {
				font-size: 26upx;
				color: #fff;
			}

			.b-record {
				display: flex;
				align-items: center;
				color: #fff;
				font-size: 26upx;

				.iconfont {
					margin-left: 10upx;
					font-size: 28upx;
				}
			}
		}

		.open-info {
			padding: 30upx 40upx;
			display: flex;
			align-items: center;
			justify-content: center;

			.b-cont {
				font-size: 26upx;
				color: #fff;
			}
		}
	}


	.box {
		margin-top: 30upx;
		background: #fff;

		.box-head {
			padding: 0 30upx;
			height: 100upx;
			line-height: 100upx;
			font-size: 30upx;
			color: #000;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.b-tips {
				font-size: 26upx;
				color: #666;
			}
		}

		.box-main {
			padding: 10upx 30upx 30upx 30upx;
		}
	}

	.card-detail {
		white-space: nowrap;

		.b-row {
			margin-right: 40upx;
			display: inline-block;

			&:last-child {
				margin-right: 0;
			}
		}

		.b-main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.iconfont {
				font-size: 80upx;
				color: #f0ad4e;
			}

			.s-tit {
				margin-top: 10upx;
				color: #333;
				font-size: 28upx;
			}

			.s-cont {
				margin-top: 10upx;
				color: #999;
				font-size: 24upx;
			}
		}
	}

	.card-list {
		display: flex;
		flex-wrap: wrap;

		.card-item {
			margin-bottom: 30upx;
			margin-right: 30upx;

			&:nth-child(3n) {
				margin-right: 0;
			}

			&:nth-last-child(1),
			&:nth-last-child(2),
			&:nth-last-child(3) {
				margin-bottom: 0;
			}
		}

		.b-main {
			padding: 20upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background: #eee;
			border-radius: 20upx;
			width: 170upx;
			height: 170upx;

			&.f-active {
				border: 2upx solid #FF9626;
				width: 166upx;
				height: 166upx;

				.b-price {
					.s-sell-price {
						color: #FF9626;
					}
				}
			}

			.b-name {
				margin-bottom: 20upx;
				font-size: 28upx;
				color: #333;
			}

			.b-price {
				display: flex;
				flex-direction: column;
				align-items: center;

				.s-sell-price {
					font-size: 32upx;
					font-weight: bold;
					color: #1A1A1A;
				}

				.s-price {
					margin-top: 10upx;
					font-size: 28upx;
					color: #808080;
				}
			}
		}
	}

	.pay-list {
		radio-group {
			display: flex;
			align-items: center;
		}

		.b-row {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.b-tit {
				flex: 1;
				display: flex;
				align-items: center;
				font-size: 28upx;
				color: #666;

				.iconfont {
					font-size: 50upx;
					color: #6CB37A;
				}

				.s-tit {
					margin-left: 10upx;
					font-size: 28upx;
				}
			}

			.b-cont {
				width: auto;
				display: flex;
				align-items: center;
				font-size: 28upx;
				color: #333;

				radio {
					transform: scale(0.8)
				}
			}
		}
	}


	.navbar {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100upx;
		background: #fff;
		border-top: 1upx solid #f6f6f6;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.b-amount {
			margin-left: 30upx;
			display: flex;
			align-items: center;

			.s-tit {
				margin-right: 10upx;
				font-size: 28upx;
				color: #333;
			}

			.s-num {
				font-size: 36upx;
				color: #FF9626;
				font-weight: bold;
			}
		}

		.b-action {
			.s-exchange {
				background: #1A1A1A;
				height: 100upx;
				padding: 0 60upx;
				line-height: 100upx;
				font-size: 30upx;
				color: #fff;
				letter-spacing: 4upx;
			}
		}
	}
</style>